<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        width: 34.333333%;
        float: right;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
</style>

<template>
    <div class="department">
        <div>
            <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加权限信息</a>
        </div>
        <form class="layui-form " >
            <div  class="layui-col-lg4 select-item" style="text-align: right;width: auto" >

                <div class="layui-inline" style="width: 200px">
                    <input type="text" v-model="searchName" placeholder="用户姓名/手机号码" class="layui-input key">

                </div>

                <div class="layui-inline" style="width: 200px">

                    <select   v-model="srguid"    name="srguid"  id="srguid"  lay-filter="storeroom"       placeholder="请选择库房"   class="layui-form-select"   >
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select      v-model="departmentid"     name="departmentid"  id="departmentid" placeholder="请选择部门"    class="layui-input layui-unselect"    >
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select   v-model="permissiondefid"       name="permissiondefid"  id="permissiondefid" placeholder="请选择权限"    class="layui-input layui-unselect"    >
                    </select>
                </div>
                <button type="button" class="layui-btn sou" @click="search">搜索</button>
            </div>

        </form>
        <table class="layui-table layui-form">

            <thead>
            <tr>
                <th>用户名称</th>
                <th>手机号码</th>
                <th>部门</th>
                <th>库房</th>
                <th>权限</th>
                <!--<th>创建人</th>-->
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(item) in afterList" >
                <tr class="id9"  v-for="(row, i) in item" >
                    <td  v-if="i === 0" :rowspan="item.length">{{row.realName}}</td>
                    <td  v-if="i === 0" :rowspan="item.length">{{row.telphone}}</td>
                    <td>{{row.depName}}</td>
                    <td>{{row.storeName}}</td>
                    <td>{{row.permissiontext}}</td>
                    <td>{{row.createtime}}</td>
                    <td><a href="javascript:;" @click="del(row.guid)">删除</a></td>
                </tr>
            </template>
            </tbody>
        </table>

        <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage" ></Pagination>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
    import Pagination from '../common/Pagination.vue'
    export default {
        name: 'SalesPermission',
        components: {Pagination},
        data () {
            return {
                departments: [],
                currentPage: 1,
                rows: 10,
                totalPage: 0,
                searchName: '',
                afterList: [],
                srguid:'',
                departmentid:'',
                permissiondefid:''
            }
        },
        mounted() {
            let that = this;
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                    that.getPageData();
                    that.getBaseInfo();
            });

        },
        methods: {
            // 数据转换
            tansList () {
                this.afterList = Object.values(this.departments.reduce((temp, item) => {
                    if( temp[item.telphone] ) {
                        temp[item.telphone].push(item)
                    }else {
                        temp[item.telphone]  = [item]
                    }
                    return temp
                },{}))
            },
            search: function() {
                this.getPageData('search');
            },
            turnPage: function(data){
                this.currentPage = data;
                this.getPageData();
            },
            getPageData: function(type = '') {
                let that = this;
                let loader = layui.layer.load();

                let postData = {rows: that.rows};
                if (type != 'search') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }


                that.srguid = $('#srguid').val();
                that.departmentid= $('#departmentid').val();
                that.permissiondefid= $('#permissiondefid').val();


                postData.searchName = that.searchName;
                postData.srguid = that.srguid;
                postData.departid = that.departmentid;
                postData.permission = that.permissiondefid;

                $.ajax({
                    url: '/sales/Salespermission!list.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function(res) {
                        if (res.info != undefined && res.info.rows != undefined) {
                            //分页数据赋值
                            // that.currentPage = res.info.indexPage;
                            that.totalPage = res.info.pageCount;
                            that.departments = res.info.rows;
                            that.tansList()

                        } else {
                            that.alert("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            },
            compare: function (property){
                return function(a,b){
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            add: function () {
                this.$parent.switchPage('addSalesPermission');
            },
            edit: function (id) {
                this.$parent.gid = id;
                this.$parent.switchPage('EditDepartment');
            },
            del: function (id) {
                let that = this;
                layer.confirm('确定要删除该数据吗？', function () {
                    let loader = layer.load();
                    $.ajax({
                        url: '/sales/Salespermission!del.action',
                        type: "post",
                        data: {guid: id},
                        dataType: "json",
                        success: function(res) {
                            if (res.info == "ok") {
                                that.toast("删除成功");
                                that.getPageData();
                            } else {
                                that.toast("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                })
            },
            getBaseInfo: function(type = '') {
                var that = this;
                $.ajax({
                    url: '/sales/Salespermission!getBaseInfo.action?openid=' + localStorage.openid,
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        console.log(res)
                        if (res.msg == 'success') {
                            let data =res;
                            $('#srguid').append(new Option('请选择库房', ""));// 下拉菜单里添加元素。
                            $.each(data.storeroom, function (index, itemroom) {
                                $('#srguid').append(new Option(itemroom.name , itemroom.guid));// 下拉菜单里添加元素
                            });
                            $('#departmentid').append(new Option('请选择部门', ""));// 下拉菜单里添加元素。
                            $.each( data.department, function (index, itemroom) {
                                $('#departmentid').append(new Option(itemroom.name , itemroom.guid));// 下拉菜单里添加元素
                            });
                            $('#permissiondefid').append(new Option('请选择权限', ""));// 下拉菜单里添加元素。
                            $.each(data.permissiondef, function (index, itemroom) {
                                $('#permissiondefid').append(new Option(itemroom.name , itemroom.code));// 下拉菜单里添加元素
                            });
                            layui.form.render("select");
                        } else {
                            $.toast("系统错误", 'forbidden');
                        }
                    },
                    complete: function () {
                        layer.close();
                    }
                });
            },
        }
    }
</script>
